これからはじめるGulp #3：gulp.watchでファイルの変更を監視しタスクを実行する

はじめに

前回のこれからはじめるGulp #2：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみるでgulp-sassを使ってSCSSファイルをCSSにコンパイルするタスクを作成しました。今回はそのタスクをベースにSCSSファイルの変更を監視してSassタスクを実行するようにします。

watchタスクを作る

まず、前回のgulpfile.jsをお復習いです。Sassを実行するだけのsassという名前のタスクが作られています。コメントの部分にwatchタスクを作ります。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

//ここにwatchタスクを作る

gulp.task('default', ['sass']);

Gulpを使ったファイルの監視

Gulpにはgulp.watchというメソッドがあり、Grunt（grunt-contrib-watch）のように別のモジュールを入れる必要はありません。gulp.watchメソッドはAPIドキュメントに詳しく書かれています。

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

watchタスクを定義する

gulp.watchメソッドはタスク内で利用するため、まずはwatchという名前のタスクを定義します。

gulp.task('watch', function(){
    //watch task
});

ちなみにタスクの依存関係はgulp.taskメソッドの第2引数に事前に処理させたいタスクを指定できます。例えば監視を開始する前に必ずSassタスクを走らせたい場合、このようにします。

gulp.task('watch', ['sass'], function(){
    //watch task
});

監視を定義する

gulp.watch(glob [, opts, cb]の通り、globにパスのパターンを指定し、optionに走らせるタスクを指定します。これでSCSSファイルの変更を監視し、変更された時にSassタスクが走ります。

gulp.task('watch', function(){
    gulp.watch('./src/scss/*.scss', ['sass']);
});

gulpfile.jsの完成イメージは下記の通り。

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});

gulp.task('watch', function(){
  gulp.watch('./src/scss/*.scss', ['sass']);
});

gulp.task('default', ['sass']);

watchタスクを試してみる

gulpfileを保存してwatchタスクを実行してみます。

$ gulp watch
[20:16:57] Using gulpfile ~/Projects/marke.io/vccw/www/wordpress/wp-content/themes/marke.io/gulpfile.js
[20:16:57] Starting 'watch'...
[20:16:57] Finished 'watch' after 6.15 ms

このようになれば監視が行われています。 試しにstyle.scssに手を加えてみます。

[20:20:54] Starting 'sass'...
[20:20:54] Finished 'sass' after 16 ms

しっかり監視していますね。監視状態を抜けるにはcontrol + Cを押します。

変更されたファイル情報をログに流す

イベントリスナーかcallbackイベントを使って、変更されたファイルの情報をログに流すことができます。

イベントリスナーを使った方法

APIドキュメントのソースをそのまま利用します。Node.jsの.on(event, listener)メソッドについてはこちらのドキュメントを参照してください。

gulp.task('watch', ['sass'], function(){
  var watcher = gulp.watch('./src/scss/*.scss', ['sass']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

この状態でwatchタスクを実行し、SCSSファイルに手を加えるとファイルのパスとイベントタイプがログに流れます。

File /Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/src/scss/style.scss was changed, running tasks...
[20:24:45] Starting 'sass'...
[20:24:45] Finished 'sass' after 6.21 ms

ちなみにこのeventオブジェクトの中身はこれだけです。

{ type: 'changed',
  path: '/Users/nukos/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/src/scss/style.scss' }

これでwatchは完璧ですね。
今回はここまで。明日はgulp-connectを使ったWebサーバーを紹介します。

この記事はこれからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行するの転載記事です。